<template>
    <div class="app-details">
        <div class="pic-aaa" style="width:3.75rem;height:3.75rem;position:relative">

				<mt-swipe :auto="0" :show-indicators="false" >
					<mt-swipe-item><img :src=" goods.spriteSheet"></mt-swipe-item>
					<mt-swipe-item><img src="http://361cdn.361sport.com/product/2018/12/14/b_5c1377b0db7ea.jpg"></mt-swipe-item>
					<mt-swipe-item><img src="http://361cdn.361sport.com/product/2018/12/14/b_5c1377b9ab204.jpg"></mt-swipe-item>
					<mt-swipe-item><img src="http://361cdn.361sport.com/product/2018/12/14/b_5c1377b9c7663.jpg"></mt-swipe-item>
				</mt-swipe>

				<!-- Add Pagination -->
				<div class="product-number-sad">
					<div class="swiper-product swiper-pagination-fraction">
                        <span class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">4</span>
                    </div>
				</div>
		</div>
		<div class="product-explain"
		>
				<h2 class="tit">{{goods.title}}</h2>
				<div class="price">
					<h3>RMB:{{goods.localPrice}} <b></b></h3>
					<span>吊牌价 {{goods.employeePrice}}</span>
				</div>
				<p>运费: 不包邮<!--<a class="postage-express-btn" href="javascript:void(0);">( 运费详情 ) </a></a>--></p>
		</div>
		<div class="productDetail-wqewea" data-pid="9454">
			<a data-type="buynow" id="buynow" class="buy" onclick="">立即购买</a>
			<a data-type="addcart" id="addcart" class="addct" @click="addCar( goods )">加入购物车</a>	
		</div>
	</div>
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui';
// import { MessageBox } from 'mint-ui';
import { mapActions } from 'vuex'

export default {
	 data(){
        return{
						goods:{},
						id:''
        }
		},
		components:{
			"mt-swipe":Swipe,
			"mt-swipe-item":SwipeItem,
			// "MessageBox":MessageBox
		},
		methods:{
			...mapActions(['addCar']),

			// 	addCar( good ){
			// 	MessageBox('提示', '添加购物车成功');
			// },
			getGoods(){
				this.id=this.$route.fullPath.substr(12)
					this.$http
					  .get('data.json')
						.then( res => {
							this.goods = res.data.items[this.id]	
							this.goods.id=this.id
						})
						.catch( err => console.log( err ))
				},
		},
		created(){
			this.getGoods()
		},
}
</script>

<style lang="stylus" scoped>
@import '~styles/_reset.styl'
  .app-details
    padding-top .5rem
  .app-details .pic-aaa img 
    width 100%
  img 
    display block
    max-width 100%
    margin 0 auto
    border none
    vertical-align middle
  .pic-aaa .product 
    position absolute
    top 0px
    left 0px
    z-index 2
    width 100%
  .swiper-container 
    margin 0 auto
    overflow hidden
  .swiper-wrapper 
    width 100%
    height 100%
    position relative
  .product-number-sad 
    position absolute
    bottom 15px
    right 15px
    z-index 8
 .product-number-sad .swiper-product 
    float: left
    width: auto
    padding 2px 4px
    border-radius 4px
    font-size 12px
    color #666666
    border 1px solid #F0F0F0
  .product-explain 
    padding .1rem
    background-color #fff 
	.tit 
		font-size .15rem
		font-weight normal
		color #1A1A1A
	.price 
		padding .1rem 0
	h3 
		color #1A1A1A
		font-size .12rem
		display inline-block
	b 
    font-size .18rem
    color #F99302
	.product-explain div span 
    font-size .12rem
    color #B2B2B2
    margin-left 1%
	p 
    font-size .12rem
    color #a46701
  .productDetail-wqewea 
    position: fixed
    left 0
    bottom 0
    width 100%
  .productDetail-wqewea a:first-child 
    background-color #fff
    color #F99302
	.buy
		float left
		width 50%
		height .48rem
		border-top .01rem solid #F99302
		border-bottom .01rem solid #F99302
		line-height .5rem
		text-align center
		font-size .15rem
	.addct
		float left
		width 50%
		height .48rem
		border-top .01rem solid #F99302
		border-bottom .01rem solid #F99302
		background-color #F99302
		color #fff
		line-height .5rem
		text-align center
		font-size .15rem


	








</style>
